<template>
  <div>
    <!-- <p class="aa"></p> -->
    <!-- <div class="aa"></div> -->
    <div class="list " v-for="item in chatList" :key="item.id" @click="goToChat">
      <div class="left">
        <img :src="item.avatar" alt="" class="img">
      </div>
      <div class="center">
        <div class="msgname">{{item.name}}</div>
        <div class="msgcen">{{item.msg}}</div>

      </div>
      <div class="right">
        <div class="time">{{getFormattedDate(item.date) }}</div>
        <div class="isread" v-show="item.isRead"></div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: null
    };
  },
  props: {
    chatList: {
      type: Array,
      required: true,
    },
  },
  watch: {
    chatList(newVal) {
      this.list = newVal;
    },
  },
  mounted() {
    this.list = this.chatList;
  },
 computed: {
    currentDate() {
      return new Date();
    },
  },
  methods: {
    getFormattedDate(dateString) {
      const date = new Date(dateString);
      const today = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate());
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);

      if (date >= today) {
        // 如果是今天，则显示小时和分钟
        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      } else if (date >= yesterday) {
        // 如果是昨天，则显示"昨天"
        return '昨天';
      } else if (date >= this.getStartDateOfWeek(today)) {
        // 如果是一周内，则显示星期几
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        return weekdays[date.getDay()];
      } else {
        // return "10:11"
        // 其他情况显示具体年月日
        return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
      }
    },
    getStartDateOfWeek(date) {
      const weekday = date.getDay();
      const startDateOfWeek = new Date(date);
      startDateOfWeek.setDate(date.getDate() - weekday);
      return startDateOfWeek;
    },
    goToChat() {
      this.$router.push('/chatWindow');
    }
  
  }
}
 

</script>

<style lang="scss" scoped>

.list {
  position: relative;
  font-size: 14px;
  width: 374px;
  height: 76px;
  visibility: inherit;
  background-color: #ffffff;
  margin-bottom: 2px;
  padding: 14px;
  box-sizing: border-box;
  .left {
    float: left;
    img {
      width: 48px;
      height: 48px;
      background-color: #ff9b9b;
      border-radius: 24px;
      margin-right: 15px;
    }
  }
  .center {
    float: left;
    .msgname {
      font-size: 14px;
    }
    .msgcen {
      color: #999;
      font-size: 12px;
      margin-top: 10px;
    }
  }
  .right {
    float: right;
    .time {
      font-size: 12px;
      color: #ccc;
      line-height: 24px;
      font-weight: 400;
      margin-bottom: 10px;
      font-family: "PingFangSC-Regular", "PingFang SC";
    }
    .isread {
      
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background-color: #ff6262;
      margin: 0 auto;
    }
  }
}
    .aa{
      background-color: rgb(255, 0, 0);
      width: 100%;
      height: 10px;
      line-height: 0;
    }
</style>